<template>
    <div class="gold-shop-wrap">
        <van-nav-bar title="现金消费券" left-arrow fixed @click-left="onClickLeft" />
        <div class="subsidy_title">
            <div class="subsidy_title_list" v-for="item, index in titleList" :key="index"
                :class="{ 'active': current === index }" @click="setCurrent(index)">{{ item.name }}</div>
        </div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="youhui_list" v-for="item, index in couponList" :key="index" :title="item" 
            :style="{
                background: 'url(' + (current == 0 ? require('../../images/mine/youhui_bg.png') : require('../../images/mine/youhui_bg1.png')) + ')',
                backgroundPosition: 'center',
                backgroundSize: 'cover'
                }">
                <div class="youhui_list_left">
                    <div class="youhui_list_left_top">{{ item.title }}</div>
                    <div class="youhui_list_left_time">{{ item.valid_time }}</div>
                    <div class="youhui_list_left_tip">{{ item.rule }}</div>
                </div>
                <div class="youhui_list_right">
                    <div class="youhui_list_right_top"  :style="{
               color: youhui_bg === 1 ? 'rgba(255, 255, 255,1)' : 'rgba(255, 255, 255, .6)'
                }">还剩</div>
                    <div class="youhui_list_right_price"><span>¥</span>{{ item.surplus_amount }}</div>
                    <div :style="{
               color: youhui_bg === 1 ? 'rgba(243, 42, 35,1)' : 'rgba(243, 42, 35, .6)'
                }" class="youhui_list_right_bottom">
                {{ item.status==0 ?'待使用'
                :item.status==1?'使用中'
                :item.status==2?'已使用'
                :item.status==3?'已过期'
                :'-' }}</div>    
                </div>

            </div>
        </van-list>

    </div>
</template>
<script>
import { Dialog } from 'vant';
import { COUPON_LIST } from '@/api/mine'
export default {
    data() {
        return {
            loading: false,
            finished: false,
            youhui_bg:0,
            active: 0,
            current: 0,
            titleList: [
                {
                    id: 0,
                    name: '待使用'
                },
                {
                    id: 1,
                    name: '已使用'
                }
            ],
            couponList: [],
            page: 1,
            pageSize: 20,
            tips: ""
        }
    },
    created() {
        // this.active=this.$route.query.id
        window.scrollTo(0, 0)

    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        // 点击切换tab
        setCurrent(index) {
            this.current = index;
            // 数据请求
            this.resetInit();
        },
        resetInit() {
            this.page = 1;
            this.couponList = [];
            this.finished = false;
            this.loading = true;
            this.onLoad()
        },
        onLoad() {
            let params = {};
            params['page_num'] = this.page;
            params['page_size'] = this.pageSize;
            params['index'] = this.current;
            this.$http.get(COUPON_LIST, { params: params })
                .then(res => {
                    const {
                        list
                    } = res.data;
                    // this.tips = res.data.tip
                    if (list && list.length) {
                        this.page++;
                        this.couponList = this.couponList.concat(list);
                        // 加载状态结束
                        this.loading = false;
                        if (list.length < this.pageSize) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                    }
                })
        },
    }
}
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
    min-height: 100vh;
    padding-top: 46px;
    background: #f5f5f5;

    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }
}

.subsidy_title {
    // width: 95%;
    margin: 0 auto;
    // margin-top: 0.3rem;
    display: flex;
    font-size: 0.28rem;
    padding: .24rem .24rem 0 .24rem;
    box-sizing: border-box;
    background-color: #fff;

    .subsidy_title_list {
        margin-right: 0.4rem;
        // font-size: 0.28rem;
        position: relative;
        color: #666666;
        padding-bottom: 0.24rem;
    }

    .subsidy_title_list.active {
        color: #F32A23;
        font-weight: 500;

        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px; // 横杠的高度，可以根据需要调整
            background-color: #F32A23; // 红色横杠
        }

        /* 选中时黑色 */
    }
}

.youhui_list {
    width: 95%;
    height: 2.14rem;
    margin: .2rem auto;
    background: url("../../images/mine/youhui_bg.png");
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: space-between;
    padding: .2rem;
    box-sizing: border-box;

    .youhui_list_left {
        width: 70%;

        .youhui_list_left_top {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .32rem;
            color: #333333;
            line-height: .44rem;
            text-align: left;
            font-style: normal;
        }

        .youhui_list_left_time {
            margin-top: .12rem;

            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .24rem;
            color: #FF6200;
            line-height: .34rem;
            text-align: left;
            font-style: normal;
        }

        .youhui_list_left_tip {
            margin-top: .12rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .22rem;
            color: #999999;
            line-height: .32rem;
            text-align: left;
            font-style: normal;
        }
    }

    .youhui_list_right {
        width: 30%;
        color: #fff;

        .youhui_list_right_top {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .24rem;
            color: #FFFFFF;
            line-height: .34rem;
            text-align: left;
            font-style: normal;
        }

        .youhui_list_right_price {
            font-family: DINAlternate, DINAlternate;
            font-weight: bold;
            font-size: .32rem;
            color: #FFFFFF;
            line-height: .58rem;
            text-align: center;
            font-style: normal;
            margin-top: .04rem;
            span {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .28rem;
                color: #FFFFFF;
                line-height: .4rem;
                // text-align: center;
                font-style: normal;
                margin-right: .1rem;
            }
        }

        .youhui_list_right_bottom {

            width: 56px;
            height: .4rem;
            margin: 0 auto;
            margin-top: .2rem;
            background: #FFFFFF;
            border-radius: 11px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .24rem;
            color: #F32A23;
            line-height: .4rem;
            text-align: center;
            font-style: normal;
        }
    }
}
</style>
